<%-- 
    Document   : index
    Created on : Sep 13, 2011, 6:04:48 PM
    Author     : Administrator
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="AccountDTO.*" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib uri="http://java.sun.com/jstl/core" prefix="c"%>
<%
            Account acc = (Account) session.getAttribute("USER");
            if (acc == null) {
                response.sendRedirect("login.jsp");
                return;
            }
%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Chat</title>
        <script type="text/javascript" src="scripts/jquery-1.6.3.min.js"></script>
        <script type="text/javascript" src="scripts/jquery-ui-1.8.16.custom.min.js"></script>
        <script type="text/javascript" src="scripts/objects.js" ></script>
        <link type="text/css" rel="stylesheet" href="styles/smoothness/jquery-ui-1.8.16.custom.css"/>
        <link type="text/css" rel="stylesheet" href="styles/bootstrap-1.2.0.min.css" />
        <script>
            var me = new Account("<%= acc.getUsername()%>", "<%= acc.getDisplayName()%>", true);
        </script>
        <style type="text/css" >
            .ui-widget {font-size: 1em !important;}
            .ui-icon {

                cursor: pointer;}
            #main {
                position: absolute;
                top: 0px;
                bottom: 0px;
                left: 0px;
                right: 0px;
            }

            #control {
                float: left;
                width: 300px;
                padding: 5px;
            }
            #chat-space {
                position: absolute;
                left: 300px;
                right:0px;
            }

            #friends, .chat-content {
                height: 400px;

            }
            .message-input {
                width: 500px;
            }

            .drop-people-here {width: 150px}

            .drop-people-here > a {
                background: #ddd !important;
                color: black !important;
            }
            .drop-people-here.dragging > a {
                background: green !important;
                color: white !important;
            }
            .drop-people-here.existed > a {
                background: Red !important;
                color: black !important;
            }
            .drop-people-here > a:after{
                content: "Drag friend here";
                text-align: center;
            }
            .drop-people-here.hover > a:after{
                content: "… and drop";
                text-align: center;
            }
            .drop-people-here.existed > a:after {
                content: "existed";
                color: white;
            }


            .ui-draggable-dragging {
                display: block;
                background: #0069D6;
                margin: 5px 3px 5px 0;
                padding: 0 15px;
                line-height: 30px;
                -webkit-border-radius: 15px;
                -moz-border-radius: 15px;
                border-radius: 15px;
            }
            .ui-draggable-dragging > a {
                text-shadow: 0 1px 1px rgba(0, 0, 0);
                color: white;
            }
            .chat-content {
                overflow: scroll;
            }
            }
        </style>

    </head>
    <body>
        <div id="header"></div>
        <div id="main" class="group">
            <div id="control">                
                <h3><%= acc.getDisplayName()%></h3>
                <div>
                    <input type="text" id="search" name="search" autocomplete="off" class="filler" placeholder="Search..."/>
                </div>
                <ul id="friends">
                </ul>
                <div>
                    <a href="javascript:void(0);" title="View archive" class="info btn">Archive</a>
                    <c:url var="Signout" value="LoginController" >
                        <c:param name="btnAction" value="Signout"/>
                    </c:url>
                    <a href="${Signout}" title="Sign out" class="danger btn">Sign out</a>
                </div>
            </div>
            <div id="chat-space">
                <div id="rooms">
                    <ul class="">
                        <li id="createRoom"><a href="#room-new" title="create new room">+</a>
                    </ul>


                    <div id="room-new" >
                        <div  class="chat-content">
                            <p>Click + button to create new room</p>
                        </div>
                    </div>






                </div>
            </div>

        </div>
        <div id="footer"></div>

        <script type="text/javascript" src="scripts/script.js"></script>
        <script type="text/javascript">
            $(".message-input").live("keypress",function(e){
                if(e.keyCode == 13 && !e.shiftKey) {
                    $(this).next("a").click();
                }
            });
        </script>

    </body>
</html>
